<template>
  <div class="wrapper">
    <div class="bg"></div>
    <van-nav-bar title="爱阅之城" class="navbar" />
    <div class="container">
      <div class="item">
        <div class="title">封面：</div>
        <div class="data data1">
          <van-uploader v-model="filelist" :max-count="1" />
          <div class="image">
            <img src="../../assets/img/bg.png" alt="" />
          </div>
        </div>
      </div>
      <div class="item">
        <div class="title">书名：</div>
        <div class="data">
          <input
            type="text"
            placeholder="输入书名"
            name="book_name"
            v-model="bookInfo.book_name"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">作者：</div>
        <div class="data">
          <input
            type="text"
            placeholder="输入作者名称"
            name="author"
            v-model="bookInfo.author"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">简介：</div>
        <div class="data">
          <textarea
            name="details"
            id=""
            cols="30"
            rows="10"
            placeholder="输入内容"
            v-model="bookInfo.details"
          ></textarea>
        </div>
      </div>
      <div class="item">
        <div class="title">电话：</div>
        <div class="data">
          <input
            type="text"
            placeholder="输入联系电话"
            name="phone"
            v-model="bookInfo.phone"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">到期时间：</div>
        <div class="data">
          <input
            type="text"
            placeholder="输入借阅天数"
            name="lend_time"
            v-model="bookInfo.lend_time"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">取书地址：</div>
        <div class="data">
          <div class="data2" @click="selectAddress">
            {{ address ? address : "请选择省市区" }}
            <van-icon name="arrow" class="arrow-down" v-if="address" />
            <van-icon name="arrow-down" class="arrow-down" v-else />
          </div>
        </div>
        <van-popup
          v-model="show"
          round
          position="bottom"
          style="
             {
              height: '30%';
            }
          "
        >
          <van-area
            :area-list="areaList"
            value="110101"
            :columns-placeholder="['请选择', '请选择', '请选择']"
            @confirm="confirm"
            @cancel="cancel"
          />
        </van-popup>
      </div>
      <div class="item">
        <div class="title"></div>
        <div class="data">
          <textarea
            name="details"
            id=""
            cols="30"
            rows="10"
            placeholder="详细地址xxx"
            v-model="addressDetail"
          ></textarea>
        </div>
      </div>
      <div class="btn">
        <van-button color="#5a78ec" round class="button" block @click="publish"
          >发布</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      filelist: [],
      bookInfo: {
        image: "",
        book_name: "",
        author: "",
        details: "",
        phone: "",
        lend_time: "",
        address: "",
        enable: true,
        owner: "",
      },
      areaList: areaList,
      show: false,
      addressDetail: "",
      address: "",
    };
  },
  methods: {
    selectAddress() {
      this.show = true;
    },
    confirm(address) {
      address = address.map((item) => item.name).join("");
      this.address = address;
      this.show = false;
    },
    cancel() {
      this.show = false;
    },
    async Addbook(bookInfo) {
      this.bookInfo.address = this.address + this.addressDetail;
      this.bookInfo.owner = this.$store.state.userInfo.username;
      let token = this.$store.state.token;
      let res = await this.$http({
        url: "/book",
        data: {
          ...bookInfo,
        },
        headers: {
          Authorization: token,
        },
        method: "post",
      });
      return res;
    },
    async AddBookImage(id, bookImage) {
      let token = this.$store.state.token;
      await this.$http({
        url: "/uploads/book",
        data: {
          id,
          bookImage,
        },
        headers: {
          Authorization: token,
        },
        method: "post",
      });
    },
    async publish() {
      if (this.filelist == "") {
        this.$toast({
          message: "请上传封面",
          position: "center",
        });
        return;
      }
      let { book_name, details, phone, lend_time, author } = this.bookInfo;
      if (
        book_name == "" ||
        details == "" ||
        phone == "" ||
        lend_time == "" ||
        author == "" ||
        this.addressDetail == ""
      ) {
        this.$toast({
          message: "请把信息填写完整",
          position: "center",
        });
        return;
      }
      let { id, message, status } = await this.Addbook(this.bookInfo);
      let bookImage = this.filelist[0].content;
      await this.AddBookImage(id, bookImage);

      if (status !== 200) {
        this.$router.push("/login");
        this.$toast({
          message: message,
          position: "center",
        });

        return;
      }
      this.$router.push("/home");
      this.$toast.success({
        message: message,
        position: "center",
      });
    },
  },
};
</script>

<style scoped>
.navbar {
  position: sticky;
  top: 0;
  left: 0;
}
input {
  color: #646468;
}
textarea {
  color: #646468;
}
.bg {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #5a78ec;
  z-index: -1;
}
.container {
  margin: 0.9375rem 0.625rem;
  margin-bottom: 4rem;
  background-color: #ffffff;
  border-radius: 0.9375rem;
  padding: 0.625rem 1rem;
}
.data1 {
  display: flex;
  align-items: center;
  width: 90%;
}
.data1 .image img {
  width: 100%;
}
.item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.9375rem;
}
.item .title {
  font-size: 0.8125rem;
  color: #868686;
  text-align: right;
  width: 30%;
}
.item .data {
  width: 70%;
}
.item .data input {
  border: 0.0625rem solid #afafaf;
  border-radius: 5px;
  padding: 0.3125rem;
  width: 90%;
}
.item .data2 {
  border: 0.0625rem solid #afafaf;
  border-radius: 5px;
  padding: 0.3125rem;
  width: 90%;
  color: #646468;
  position: relative;
}
.item .data textarea {
  border: 0.0625rem solid #afafaf;
  border-radius: 5px;
  padding: 0.3125rem;
  width: 90%;
  height: 4rem;
}
.image {
  margin-left: 1.875rem;
}
.arrow-down {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 1;
}
.btn {
  display: flex;
  justify-content: center;
  margin: 1.25rem 0;
}
.button {
  width: 40%;
  font-size: 1.125rem;
}
</style>